<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">设备</span>
            <ClientSelect v-model="task_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
            <span style="margin-right:5px;">任务名称</span>
            <Input v-model="task_data.task_name" placeholder="任务名称" style="width: 200px;margin-right:15px;"></Input>
            <span style="margin-right:5px;">任务类型</span>
            <Select v-model="task_data.task_type" style="width: 200px;margin-right:15px;">
                <Option value="">全部</Option>
                <Option value="PING">PING</Option>
                <Option value="TCP">TCP</Option>
            </Select>
            <span style="margin-right:5px;">任务状态</span>
            <Select v-model="task_data.task_enable" style="width: 200px;margin-right:15px;">
                <Option value="">全部</Option>
                <Option value="1">启用</Option>
                <Option value="0">禁用</Option>
            </Select>
            <span style="margin-right:5px;">任务结果</span>
            <Select v-model="task_data.task_result" style="width: 200px;margin-right:15px;">
                <Option value="">全部</Option>
                <Option value="0">成功</Option>
                <Option value="1">失败</Option>
            </Select>
            <Button type="primary" @click="handleTaskSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearTaskSearch" style="margin-right: 15px;">重置</Button>
        </div>
        <Table border :columns="task_data.columns" :data="task_data.data" stripe>
            <template #client_id="{ row }">
                <ClientTableCellValue :client_id="row.client_id" />
            </template>
            <template #task_type="{ row }">
                <div v-if="row.task_type == 'PING'">
                    <Tag color="primary">PING</Tag>
                    {{ row.client_ip }}
                </div>
                <div v-else-if="row.task_type == 'TCP'">
                    <Tag color="warning">TCP</Tag>
                    {{ row.client_ip }}:{{ row.client_port }}
                </div>
            </template>
            <template #task_result="{ row }">
                <div v-if="row.task_result == 1">
                    <div><Tag color="success">成功</Tag></div>
                    <div style="color:#aaa;font-size: 10px;">{{ row.task_last_time }}</div>
                </div>
                <div v-else-if="row.task_result == 0">
                    <div><Tag color="error">失败</Tag></div>
                    <div style="color:#aaa;font-size: 10px;">{{ row.task_last_time }}</div>
                </div>
                <Tag v-else color="default">未检测</Tag>
            </template>
            <template #task_enable="{ row }">
                <TaskEnableSwitch :data="row" />
            </template>
            <template #action="{ row }">
                <TaskEditButton :data="row" @success="handleGetTasks" style="margin-right:5px;" />
                <TaskDeleteButton :data="row" @success="handleGetTasks" />
            </template>
        </Table>
        <Page :total="task_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleTaskPageChange" @on-page-size-change="handleTaskPageSizeChange" />
    </div>
</template>

<script>
import ClientSelect from './ClientSelect.vue';
import ClientTableCellValue from './ClientTableCellValue.vue';
import TaskEditButton from './TaskEditButton.vue';
import TaskDeleteButton from './TaskDeleteButton.vue';
import TaskEnableSwitch from './TaskEnableSwitch.vue';

export default {
    name: "TasksView",
    components: {
        ClientSelect,
        ClientTableCellValue,
        TaskEditButton,
        TaskDeleteButton,
        TaskEnableSwitch
    },
    data() {
        return {
            task_data: {
                client_id: '',
                task_name: '',
                task_type: '',
                client_ip: '',
                client_port: 0,
                task_result: '',
                task_enable: 0,
                columns: [
                    { title: '任务ID', key: 'task_id', width: 100, align: 'center' },
                    { title: '设备ID', slot: 'client_id', width: 200, align: 'center'},
                    { title: '任务名称', key: 'task_name', align: 'center' },
                    { title: '任务类型', slot: 'task_type', align: 'center' },
                    { title: '任务最后执行结果', slot: 'task_result', width: 150, align: 'center' },
                    { title: '任务启用', slot: 'task_enable', width: 100, align: 'center' },
                    { title: '操作', slot: 'action', width: 150, align: 'center' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        };
    },
    methods: {
        handleTaskSearch() {
            this.task_data.page_current = 1;
            this.handleGetTasks();
        },
        handleClearTaskSearch() {
            this.task_data.client_id = '';
            this.task_data.task_name = '';
            this.task_data.task_type = '';
            this.task_data.task_enable = '';
            this.task_data.task_result = '';
            this.task_data.page_current = 1;
            this.handleGetTasks();
        },
        handleTaskPageChange(page_current) {
            this.task_data.page_current = page_current;
            this.handleGetTasks();
        },
        handleTaskPageSizeChange(page_size) {
            this.task_data.page_size = page_size;
            this.task_data.page_current = 1;
            this.handleGetTasks();
        },
        handleGetTasks() {
            var url = '/get_tasks?page_size=' + this.task_data.page_size + '&page_current=' + this.task_data.page_current;
            if (this.task_data.client_id) {
                url += '&client_id=' + encodeURIComponent(this.task_data.client_id);
            }
            if (this.task_data.task_name) {
                url += '&task_name=' + encodeURIComponent(this.task_data.task_name);
            }
            if (this.task_data.task_type) {
                url += '&task_type=' + encodeURIComponent(this.task_data.task_type);
            }
            if (this.task_data.task_enable) {
                url += '&task_enable=' + encodeURIComponent(this.task_data.task_enable);
            }
            if (this.task_data.task_result) {
                url += '&task_result=' + encodeURIComponent(this.task_data.task_result);
            }
            this.$http.get(url).then(res => {
                this.task_data.page_total = res.page_total;
                let data = res.data;
                data.forEach(item => {
                    item.task_enable = item.task_enable == 1; // 将 task_enable 转换为布尔值
                });
                this.task_data.data = data;
            })
        },
    },
    created() {
        this.handleGetTasks();
    }
}
</script>